package com.mensanyun.yminder.control

import androidx.compose.foundation.*
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.LocalTextStyle
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.layout.positionInRoot
import androidx.compose.ui.text.TextRange
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.mensanyun.yminder.core.data.Topic
import com.mensanyun.yminder.core.layout.ContentLayoutConstrains
import kotlinx.coroutines.DelicateCoroutinesApi


//@OptIn(ExperimentalFoundationApi::class)
//@Composable
//fun topicCell(topic: Topic) {
//    var editMode by remember { mutableStateOf(false) }
//    var tmpValue by remember { mutableStateOf(topic.text) }
//    val state = remember {
//        mutableStateOf(TextFieldValue(topic.text))
//    }
//    var boxSize by remember { mutableStateOf(IntSize(0, 0)) }
//    var boxPosition by remember { mutableStateOf(Offset(0f, 0f)) }
//    var txtSize by remember { mutableStateOf(IntSize(0, 0)) }
//    var txtPosition by remember { mutableStateOf(Offset(0f, 0f)) }
//
//    val interactionSource = remember { MutableInteractionSource() }
//    val isHovered by interactionSource.collectIsHoveredAsState()
//    val focusRequester = remember { FocusRequester() }
//    Box(
//        modifier = Modifier.width(IntrinsicSize.Min).hoverable(interactionSource = int
//        eractionSource).onClick(
//            matcher = PointerMatcher.mouse(PointerButton.Secondary),
//            onDoubleClick = { println("double click") }) { println("box click") }
//            .onGloballyPositioned {
//                boxSize = it.size
//                boxPosition = it.positionInRoot()
//                topic.layoutProperties.width = boxSize.width
//                topic.layoutProperties.height = boxSize.height
//                println("content layout:${ContentLayoutConstrains.contentAreaOffset}")
//                topic.layoutProperties.x = boxPosition.x - ContentLayoutConstrains.contentAreaOffset.x
//                topic.layoutProperties.y = boxPosition.y - ContentLayoutConstrains.contentAreaOffset.y
//            }.background(Color.LightGray, shape = RoundedCornerShape(10.dp))
//            .border(
//                1.dp,
//                if (isHovered || editMode) Color.Blue else Color.LightGray,
//                shape = RoundedCornerShape(10.dp)
//            ),
//        contentAlignment = Alignment.Center
//    ) {
//        BasicTextField(
//            value = state.value,
//            onValueChange = { state.value = it },
//            modifier = Modifier.onFocusChanged {
//                if (editMode and !it.isFocused) {
//                    editMode = false
//                    topic.text = state.value.text
//                }
//                if (it.isFocused) {
//                    val text = state.value.text
//                    state.value = state.value.copy(
//                        selection = TextRange(0, text.length)
//                    )
//                }
//            }.focusRequester(focusRequester).padding(10.dp).onGloballyPositioned {
//                txtSize = it.size
//                txtPosition = it.positionInRoot()
//            }.focusable(),
//            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center)
//        )
//
//
//        AnimatedVisibility(
//            visible = !editMode,
//            enter = fadeIn(),
//            exit = fadeOut()
//        ) {
//            Text(
//                text = state.value.text,
//                modifier = Modifier.combinedClickable(onDoubleClick = {
//                    editMode = !editMode;focusRequester.requestFocus()
//                }) { }.padding(10.dp),
//                textAlign = TextAlign.Center,
//            )
//        }
//    }
//}


@Composable
@OptIn(ExperimentalFoundationApi::class, DelicateCoroutinesApi::class)
fun topicCell2(topic: Topic) {
    var editMode by remember { mutableStateOf(false) }
    val state = remember {
        mutableStateOf(TextFieldValue(topic.text))
    }
    val focusRequester = remember { FocusRequester() }
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    var boxSize by remember { mutableStateOf(IntSize(0, 0)) }
    var boxPosition by remember { mutableStateOf(Offset(0f, 0f)) }
    DisposableEffect(editMode) {
        if (editMode) {
            focusRequester.requestFocus()
        }
        onDispose { }
    }

    Box(
        modifier = Modifier.onClick(onDoubleClick = {
            editMode = true
        }) {}
            .hoverable(interactionSource = interactionSource).border(
                1.dp,
                if (isHovered || editMode) Color.Blue else Color.White,
                shape = RoundedCornerShape(10.dp)
            ).padding(3.dp).focusable().onGloballyPositioned {
                boxSize = it.size
                boxPosition = it.positionInRoot()
                topic.layoutProperties.width = boxSize.width
                topic.layoutProperties.height = boxSize.height
                topic.layoutProperties.x = boxPosition.x - ContentLayoutConstrains.contentAreaOffset.x
                topic.layoutProperties.y = boxPosition.y - ContentLayoutConstrains.contentAreaOffset.y
            },
        contentAlignment = Alignment.Center
    ) {
        BasicTextField(
            value = state.value,
            enabled = editMode,
            onValueChange = { state.value = it },
            modifier = Modifier.focusRequester(focusRequester).onFocusChanged {
                if (editMode and !it.isFocused) {
                    editMode = false
                    topic.text = state.value.text
                }
                if (it.isFocused) {
                    val text = state.value.text
                    state.value = state.value.copy(
                        selection = TextRange(0, text.length)
                    )
                }
            }.background(
                color = Color.LightGray, shape = RoundedCornerShape(10.dp)
            ).padding(10.dp),
            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center)
        )

    }
}